<template>
  <div id="app">
    <div class="container">

      <Category title="游戏">
        <template scope="data">
<!--          {{data}}-->
          <ul>
            <li v-for="(item, index) in data.gameList" :key="index">{{item}}</li>
          </ul>
        </template>

      </Category>
      <Category title="游戏" scope="{gameList}">
        <template scope="{gameList}">
          <ol>
            <li v-for="(item, index) in gameList" :key="index">{{item}}</li>
          </ol>
        </template>

      </Category>
      <Category title="游戏">
        <template slot-scope="{gameList}">
          <h4 v-for="(item, index) in gameList" :key="index">{{item}}</h4>
        </template>
      </Category>
    </div>
  </div>
</template>

<script>
import Category from "./components/Category.vue";
export default {
  name: 'App',
  components: {Category},
  data() {
    return {
      // games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-around;
}

.foot {
  display: flex;
  justify-content: space-between;
}
h4 {
  text-align: center;
}
</style>
